<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!-- 使用UTF-8 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport"
			content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 设置移动终端可视区域 -->
		<meta content="telephone=no" name="format-detection">
		<!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
		<title>登录</title>
		<link href="./survey_outside/css/style.css" type="text/css" rel="stylesheet" />
		<link href="./survey_outside/css/weui.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div id="containerVue" v-cloak style="padding-top: 0;">
			<div class="login">
				<div class="login_bg">
					<img src="./survey_outside/image/login-pic.png" alt="" class="img">
					<img src="./survey_outside/image/sysName.png" alt="" class="icon">
				</div>

				<div class="cont">
					<div class="nav">
						<div class="select" @click="userSel(1)" :class="[userType == 1?'selected':'']">
							<img src="./survey_outside/image/rem3.png" alt="">
							<span>业主用户</span>
							<div class="hr"></div>
						</div>
						<div class="select" @click="userSel(2)" :class="[userType == 2?'selected':'']">
							<img src="./survey_outside/image/rem1.png" alt="">
							<span>内部用户</span>
							<div class="hr"></div>
						</div>
					</div>
				</div>
				<div v-if="userType==1">
					<div class="login_input">
						<img class="login_input_icon" src="./survey_outside/image/iphone.png" alt="" />
						<input type="number" placeholder="请输入手机号码" v-model="param.mobile" />
					</div>
					<div class="login_input">
						<img class="login_input_icon" src="./survey_outside/image/iphone.png" alt="" />
						<input type="number" placeholder="请输入验证码" v-model="param.inputCapcha" />
						<span v-show="show" @click="getCode" class="code">获取验证码</span>
						<span v-show="!show" class="code">{{count}}s后再获取</span>
					</div>
				</div>
				<div v-if="userType==2">
					<div class="login_input">
						<img class="login_input_icon" src="./survey_outside/image/iphone.png" alt="" />
						<input type="text" placeholder="请输入用户名" v-model="param.userName" />
					</div>
					<div class="login_input">
						<img class="login_input_icon" src="./survey_outside/image/iphone.png" alt="" />
						<input type="password" placeholder="请输入密码" v-model="param.passWord" />
						<span class="code" style="background-color: #fff;color: #0787d5;"
							@click="loginResetUrl">修改密码?</span>
					</div>
				</div>
				<a class="serverText" href="tel:17723668239" style="padding: 0 0 .5rem;font-size: .65rem;">联系电话: 17723668239</a>
				<div class="btn" @click="login">
					登录<i></i>
				</div>
			</div>
		</div>
		<script src="./survey_inside/script/jquery-3.5.js"></script>
		<script src="./survey_inside/script/vue.js"></script>
		<script src="./survey_inside/script/api.js"></script>
		<script src="./survey_inside/script/ajax.js"></script>
		<script src="./survey_inside/script/aesEncrypt.js"></script>
		<script>
			var app = new Vue({
				el: '#containerVue',
				data: {
					param: {
						"mobile": "",
						"inputCapcha": "",
						"passWord": "",
						"userName": ""
					},
					userType: '1',
					show: true,
					count: '',
					timer: null,
					encryptedString:{
						key:"",
						iv:"",
					},
				},
				created() {
					this.getStorage();
					this.getEncryptedString();
				},
				watch: {},
				methods: {
					// 获取缓存数据
					getStorage() {
						console.log(this.param);
						if (localStorage.getItem("userName")) {
							this.param.userName = localStorage.getItem("userName");
							this.param.passWord = localStorage.getItem("passWord");
						} else {
							this.param.userName = "";
							this.param.passWord = "";
						}
					},
					// 跳转重置密码
					loginResetUrl() {
						window.location.href = "./loginReset.html";
					},
					// 用户切换
					userSel(e) {
						this.userType = e;
						if (this.userType == 1) {
							this.param.mobile = "";
							this.param.inputCapcha = "";
						} else {
							// this.param.userName = "";
							// this.param.passWord = "";
						}
					},
					// 请求验证码
					getCode() {
						var that = this,
							regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (!regPhone.test(this.param.mobile)) {
							$.Jwarning("请输入正确的手机号")
						} else {
							ajaxHttp({
								url: 'jeecg-boot/sys/sms',
								type: 'post',
								data: {
									mobileNum: that.param.mobile
								},
								success: function(res) {
									console.log(res);
									// 本地存入token
									if (res.success) {
										$.Jsuccess(res.message);
										that.timeCode();
									} else {
										$.Jwarning(res.message);
									}
								}
							})
						}
					},
					// 验证码倒计时
					timeCode() {
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					},
					getEncryptedString() {
						let that=this
						ajaxHttp({
							url: 'jeecg-boot/sys/getEncryptedString',
							type: 'get',
							data:{},
							success: function(res) {
								let encryptedString = {};
								encryptedString.key = res.result.key;
								encryptedString.iv = res.result.iv;
								that.encryptedString=encryptedString
								console.log(that.encryptedString)
								return encryptedString;
							}
						});
					},
					// 登录条件判断
					login() {
						var that = this,
							regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (this.userType == 1) {//外部业主用户
							if (!regPhone.test(this.param.mobile)) {
								$.Jwarning("请输入正确的手机号")
							} else if (this.param.inputCapcha == "") {
								$.Jwarning("请输入验证码")
							} else {
								loginHttp({
									url: 'jeecg-boot/sys/phoneLogin',
									type: 'post',
									data: that.param,
									success: function(res) {
										console.log(res);
										// 本地存入token
										if (res.success) {
											localStorage.setItem('access_token', res.result['token']);
											window.location.href = "./survey_outside/index.html";
										} else {
											$.Jwarning(res.message)
										}
									}
								})
							}
						} else {//院内用户
							if (this.param.userName == "") {
								$.Jwarning("请输入用户名")
							} else if (this.param.passWord == "") {
								$.Jwarning("请输入密码")
							}else if (!/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/.test(this.param.passWord)) {
                $.Jwarning("密码由数字、大小写字母和特殊符号组成!")
              } else {
								let passWord=encryption(this.param.passWord,this.encryptedString.key,this.encryptedString.iv)
								console.log(this.param.passWord)
								console.log(passWord)
								loginHttp({
									url: 'jeecg-boot/sys/userLogin',
									type: 'post',
									data: {
										userName:that.param.userName,
										passWord:passWord
									},
									success: function(res) {
										// console.log(res);
										// 本地存入token
										if (res.success) {
											localStorage.setItem('access_token', res.result['token']);
											localStorage.setItem('userName', that.param.userName);
											localStorage.setItem('passWord', that.param.passWord);
											window.location.href = "./survey_inside/statistics.html";
										} else {
											$.Jwarning(res.message)
											localStorage.clear();
										}
									}
								})
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
